<template>
  <section class="echarts-box">
    <div ref="mainChart" :style="{width:'100%',height:'100%'}"></div>
  </section>
</template>

<script>
import { TsccChartBase } from "./TsccChartBase";
const echarts = require("echarts/lib/echarts");
// 引入仪表盘
require("echarts/lib/chart/gauge");
// 引入渐变色相关组件
require("echarts/lib/component/graphic");
// 引入提示框和标题组件
// require('echarts/lib/component/title')
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/legend')

export default {
  components: {},
  props: {
    chartData: Number, // 图表数据
    requiredSettings: Object, // 必选配置项
    optionalSettings: Object // 可选配置项
  },
  data() {
    return {
      defaultSettings: {},
      option: {
        tooltip: {
          formatter: "{b} : {c}%"
        },
        toolbox: {
          //   feature: {
          //     restore: {},
          //     saveAsImage: {}
          //   }
        },
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            radius: "100%",
            center: ["50%", "65%"],
            title: { textStyle: { color: "#fff" } },
            pointer: {
              length: "80%", //指针长度,
              width: 5
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              length: 15
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: [],
                width: 10
              }
            },//axisLine.lineStyle.color
            itemStyle: {
              color: "#fff" //auto指针颜色-数值所在区间颜色
            },
            detail: {
              formatter: "{value}%",
              offsetCenter: [0, "30%"],
              textStyle: { color: "white", fontSize: 20 }
            },
            data: []
          }
        ]
      },
      echartsInstance: null
    };
  },
    // mixins: [TsccChartBase], // 混入公有属性
  computed: {},

  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.echartsInstance = echarts.init(this.$refs.mainChart);
      let settings = Object.assign(
        {},
        this.defaultSettings,
        this.optionalSettings
      );
      let option = this.option
      option.series[0].axisLine.lineStyle.color = settings.color
      // 数据赋值
    //   this.injectBaseSettings(option, settings);

      option.series[0].data.push({
        value: this.chartData,
        name: this.requiredSettings.name
      });

      // 渲染曲线
      this.renderEChart(this.option);
    },
    renderEChart(option) {
      this.echartsInstance.setOption(option);
    }
  },
  watch: {
    chartData: {
      handler(val) {
        if (!this.echartsInstance) {
          return;
        }
        this.option.series.forEach((item, index) => (item.data = val[index]));
        this.renderEChart(this.option);
      },
      immediate: true
    }
  }
};
</script>
<style scoped>
.echarts-box {
  height: 100%;
}
</style>